<template>
    <h-section title="基本信息" class="create-product-form-content">
        <template #titleExtra>
            <flexbox class="extra-cont">
                <span class="extra-text">{{ form.requireNumber }}</span>
            </flexbox>
        </template>
        <div>
            <a-form layout="inline" ref="ruleFormRef" :model="form" :rules="rules">
                <a-row :gutter="24">
                    <a-col :span="24">
                        <a-form-item label="需求标题" name="requireName">
                            <span v-if="disabled">
                                {{ form.requireName }}
                            </span>
                            <a-textarea v-model:value="form.requireName" placeholder="请输入需求标题限制200个字" :maxlength="200" auto-size v-else />
                        </a-form-item>
                    </a-col>

                    <a-col :span="16">
                        <a-row>
                            <a-col :span="24">
                                <a-form-item label="所属产品" name="requireSystem">
                                    <div style="width: 100%">
                                        <span v-if="disabled || detail.relateVersionId">
                                            {{ $filters.valToNameFilter('fromSystem', form.requireSystem) }}
                                        </span>
                                        <div v-else>
                                            <h-search-select-cell
                                                :default-value="$filters.valToNameFilter('fromSystem', form.requireSystem)"
                                                type="mySystem"
                                                label="system"
                                                @success="handleSelectChange($event, 'requireSystem')"
                                            />
                                        </div>
                                    </div>
                                </a-form-item>
                                <a-form-item label="关联业务需求">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ form.relateRequireName }}
                                        </span>
                                        <h-search-select-cell
                                            allowClear
                                            :default-value="form.relateRequireName"
                                            type="taskRequire"
                                            label="requestName"
                                            :searchQuery="{ system: form.requireSystem }"
                                            :disabled="requireSystemDisabled"
                                            @success="handleSelectChange($event, 'taskRequire')"
                                            v-else
                                        />
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="预发布版本">
                                    <flexbox>
                                        <flexbox-item>
                                            <span v-if="disabled">
                                                {{ form.relateVersionName ? form.relateVersionName + '-' + form.relateVersionNumber : '' }}
                                            </span>
                                            <router-link
                                                :to="{ path: '/version/versionDetail', query: { id: detail.relateVersionId } }"
                                                v-else-if="
                                                    [
                                                        'basicLine',
                                                        'requireDev',
                                                        'requireTest',
                                                        'productChange',
                                                        'outSide',
                                                        'productManagerReview',
                                                        'teamLeaderAduit',
                                                        'requireOnline'
                                                    ].includes(versionProcessStepStatus)
                                                "
                                            >
                                                {{ form.relateVersionName ? form.relateVersionName + '-' + form.relateVersionNumber : '' }}
                                            </router-link>
                                            <h-search-select-cell
                                                ref="searchVersionSelectCellRef"
                                                allowClear
                                                :default-value="{
                                                    label: `${form.relateVersionName ? form.relateVersionName + '-' + form.relateVersionNumber : ''}`,
                                                    id: form.relateVersionId
                                                }"
                                                type="version"
                                                keyField="id"
                                                valueLabelField="label"
                                                :searchQuery="{ system: form.requireSystem }"
                                                :disabled="requireSystemDisabled"
                                                @success="handleSelectChange($event, 'version')"
                                                v-else
                                            >
                                                <template #label="{ record }"> {{ record.versionName }}—{{ record.versionNumber }} </template>
                                            </h-search-select-cell>
                                        </flexbox-item>
                                        <div
                                            class="warning-color cursor-pointer margin-l-8"
                                            v-if="
                                                !disabled &&
                                                !requireSystemDisabled &&
                                                ![
                                                    'basicLine',
                                                    'requireDev',
                                                    'requireTest',
                                                    'productChange',
                                                    'outSide',
                                                    'productManagerReview',
                                                    'teamLeaderAduit',
                                                    'requireOnline'
                                                ].includes(versionProcessStepStatus)
                                            "
                                            @click="handleCreateVersion"
                                        >
                                            新增版本
                                        </div>
                                    </flexbox>
                                </a-form-item>
                            </a-col>
                            <a-col :span="12">
                                <a-form-item label="需求类型" name="requireType">
                                    <div style="width: 100%">
                                        <span v-if="disabled || detail.jiraUrl">
                                            {{ $filters.valToNameFilter('requireType', form.requireType) }}
                                        </span>
                                        <a-select placeholder="请选择" v-model:value="form.requireType" v-else>
                                            <a-select-option v-for="item of dicOptions.requireType" :key="item.code">
                                                {{ item.dimensionName }}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="需求描述" name="requireDesc">
                                    <div v-html="form.requireDesc" v-if="disabled" class="desc-content" />
                                    <div style="position: relative" v-else>
                                        <t-editor ref="editor" v-model="form.requireDesc" />
                                    </div>
                                </a-form-item>
                                <a-form-item label="验收标准" name="checkStandard">
                                    <span v-if="disabled">
                                        {{ form.checkStandard }}
                                    </span>
                                    <a-textarea v-model:value="form.checkStandard" showCount :maxlength="100" auto-size v-else />
                                </a-form-item>
                                <a-form-item label="理由" name="reason">
                                    <span v-if="disabled">
                                        {{ form.reason }}
                                    </span>
                                    <a-textarea v-model:value="form.reason" showCount :maxlength="100" auto-size v-else />
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-col>

                    <a-col :span="8">
                        <a-row>
                            <a-col :span="24" v-if="detail.jiraId">
                                <a-form-item label="来源标识">
                                    <span> JIRA </span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24" v-if="detail.jiraId && detail.pmpJiraIssueDTO">
                                <a-form-item label="解决状态">
                                    <span>
                                        {{ detail.pmpJiraIssueDTO.status }}
                                    </span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24" v-if="detail.jiraId && detail.pmpJiraIssueDTO && detail.pmpJiraIssueDTO.issueType === '缺陷'">
                                <a-form-item label="环境">
                                    <span>
                                        {{ detail.pmpJiraIssueDTO.environment }}
                                    </span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24" v-if="detail.jiraId && detail.pmpJiraIssueDTO">
                                <a-form-item label="开发类型" name="devType">
                                    <span>
                                        {{ detail.pmpJiraIssueDTO.issueType }}
                                    </span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24" v-else>
                                <a-form-item label="开发类型" name="devType">
                                    <span v-if="disabled || form.systemType !== '3'">
                                        {{ $filters.valToNameFilter('systemType', form.devType) }}
                                    </span>
                                    <a-select placeholder="请选择" v-model:value="form.devType" style="text-align: left" v-else>
                                        <a-select-option v-for="item of dicOptions.systemType.slice(0, 2)" :key="item.code">
                                            {{ item.dimensionName }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="前端预估工时" name="frontPlanWorkHours">
                                    <span v-if="disabled">
                                        {{ form.frontPlanWorkHours }}
                                    </span>
                                    <a-input-number
                                        v-model:value="form.frontPlanWorkHours"
                                        :min="0"
                                        :max="10000"
                                        :maxlength="5"
                                        style="width: 100%"
                                        @change="handleCalcPlanWorkHours"
                                        v-else
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="后端预估工时" name="backPlanWorkHours">
                                    <span v-if="disabled">
                                        {{ form.backPlanWorkHours }}
                                    </span>
                                    <a-input-number
                                        v-model:value="form.backPlanWorkHours"
                                        :min="0"
                                        :max="10000"
                                        :maxlength="5"
                                        style="width: 100%"
                                        @change="handleCalcPlanWorkHours"
                                        v-else
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="实施预估工时" name="executePlanWorkHours">
                                    <span v-if="disabled">
                                        {{ form.executePlanWorkHours }}
                                    </span>
                                    <a-input-number
                                        v-model:value="form.executePlanWorkHours"
                                        :min="0"
                                        :max="10000"
                                        :maxlength="5"
                                        style="width: 100%"
                                        @change="handleCalcPlanWorkHours"
                                        v-else
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="24">
                                <a-form-item label="预计工时（h）" name="planWorkHours">
                                    <span>{{ form.planWorkHours }}</span>
                                </a-form-item>
                            </a-col>
                            <a-col :span="24" v-if="form.devType === '1'">
                                <a-form-item label="计算方式">
                                    <span v-if="disabled">
                                        {{ form.calModel === '0' ? '功能点' : '模块' }}
                                    </span>
                                    <a-radio-group v-model:value="form.calModel" @change="handleRadioChange" style="margin-bottom: 8px" v-else>
                                        <a-radio value="0"> 功能点 </a-radio>
                                        <a-radio value="1"> 模块 </a-radio>
                                    </a-radio-group>
                                </a-form-item>
                                <!-- 计算方式如果是功能点就需要计算，如果是模块就直接填 -->
                                <div v-if="form.calModel === '0'">
                                    <a-form-item label="人天价格">
                                        <span v-if="disabled">
                                            {{ form.unitPrice }}
                                        </span>
                                        <a-input-number v-model:value="form.unitPrice" :min="0" :max="1000000" style="width: 100%" v-else />
                                    </a-form-item>
                                    <a-form-item label="人天数">
                                        <span v-if="disabled">
                                            {{ form.manDay }}
                                        </span>
                                        <a-input-number v-model:value="form.manDay" :min="0" :max="1000" style="width: 100%" v-else />
                                    </a-form-item>
                                    <a-form-item label="预估成本">
                                        {{ form.unitPrice * form.manDay }}
                                    </a-form-item>
                                </div>
                                <div v-else>
                                    <a-form-item label="预估成本">
                                        <span v-if="disabled">
                                            {{ form.planCost }}
                                        </span>
                                        <a-input-number
                                            v-model:value="form.planCost"
                                            :min="0"
                                            :max="100000000"
                                            :maxlength="9"
                                            style="width: 100%"
                                            v-else
                                        />
                                    </a-form-item>
                                </div>
                            </a-col>
                            <!-- 供应商 必须是外采系统 -->
                            <a-col :span="24" v-if="form.devType === '1'">
                                <a-form-item label="供应商名称">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ form.supplierName }}
                                        </span>
                                        <a-input v-model:value="form.supplierName" placeholder="请输入名称限制200字以内" :maxlength="200" v-else />
                                    </div>
                                </a-form-item>
                                <a-form-item label="供应商平台编号">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ form.supplierNum }}
                                        </span>
                                        <a-input v-model:value="form.supplierNum" placeholder="请输入编号限制200字以内" :maxlength="200" v-else />
                                    </div>
                                </a-form-item>
                                <a-form-item label="供应商状态">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ $filters.valToNameFilter(form.supplierStatus) }}
                                        </span>
                                        <a-select placeholder="请选择" v-model:value="form.supplierStatus" v-else>
                                            <a-select-option v-for="item of dicOptions.supplierStatus" :key="item.code">
                                                {{ item.dimensionName }}
                                            </a-select-option>
                                        </a-select>
                                    </div>
                                </a-form-item>
                            </a-col>

                            <a-col :span="24">
                                <a-form-item label="当前处理人" name="agentUser">
                                    <div style="width: 100%">
                                        <span v-if="disabled">
                                            {{ form.agentUser }}
                                        </span>
                                        <h-search-select-cell
                                            :default-value="form.agentUser"
                                            type="systemManager"
                                            label="empName"
                                            :searchQuery="{ catalogCode: form.catalogCode }"
                                            :disabled="requireSystemDisabled"
                                            @success="handleSelectChange($event, 'systemManager')"
                                            v-else
                                        >
                                            <template #label="{ record }"> {{ record.empName }}（{{ record.empId }}） </template>
                                        </h-search-select-cell>
                                    </div>
                                </a-form-item>
                                <a-form-item label="修复版本">
                                    <span v-if="disabled">
                                        {{ form.repairVersion }}
                                    </span>
                                    <a-textarea
                                        v-model:value="form.repairVersion"
                                        placeholder="请输入版本限制150个字"
                                        :maxlength="150"
                                        auto-size
                                        v-else
                                    />
                                </a-form-item>
                                <a-form-item label="预计交付日期">
                                    <div style="width: 100%">
                                        {{ $filters.dateFilter(form.expectTime) }}
                                    </div>
                                </a-form-item>
                                <a-form-item label="标签">
                                    <div v-if="disabled">
                                        <flexbox wrap="wrap" v-if="form.pmpLabels">
                                            <a-tag color="blue" style="margin-bottom: 2px" v-for="item of form.pmpLabels" :key="item.id">
                                                {{ item.name }}
                                            </a-tag>
                                        </flexbox>
                                    </div>
                                    <HSearchMultiSelectCell
                                        type="systemLabel"
                                        label="name"
                                        valueLabelField="name"
                                        keyField="name"
                                        isSupportEnter
                                        :disabled="!form.requireSystem"
                                        :default-value="form.pmpLabels"
                                        :searchQuery="{ systemId: form.requireSystem, type: 3 }"
                                        @success="handleSelectChange($event, 'label')"
                                        v-else
                                    />
                                </a-form-item>
                                <a-form-item label="上线日期">
                                    <div style="width: 100%">
                                        {{ form.onlineTime }}
                                    </div>
                                </a-form-item>
                                <a-form-item label="优先级" name="level">
                                    <span v-if="disabled">
                                        {{ $filters.valToNameFilter('level', form.level) }}
                                    </span>
                                    <a-select placeholder="请选择" v-model:value="form.level" style="text-align: left" v-else>
                                        <a-select-option v-for="item of dicOptions.level" :key="item.code">
                                            {{ item.dimensionName }}
                                        </a-select-option>
                                    </a-select>
                                </a-form-item>
                                <a-form-item label="关联JIRA需求" v-if="detail.id && detail.jiraUrl">
                                    <a @click="jumpTo(detail.jiraUrl)">{{ $filters.jiraUrlFilter(detail.jiraUrl) }}</a>
                                </a-form-item>
                                <a-form-item label="文档">
                                    <file-cell :span="24" v-if="disabled" :fileList="form.files" />
                                    <upload-cell
                                        :span="24"
                                        :fileParams="{ connectType: '产品文档', type: 3 }"
                                        @valueChange="fileChange"
                                        :fileList="form.files"
                                        v-else
                                    >
                                        <template #extra>
                                            <span class="caption-font-color">提示：请上传产品需求相关资料文档，例如使用手册，业务流程图等</span>
                                        </template>
                                    </upload-cell>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </a-form>
        </div>
    </h-section>

    <!-- 修改固定定位的按钮容器 -->
    <div class="create-product-form-buttons" v-if="!disabled">
        <a-button @click="handleCancel">取消</a-button>
        <a-button type="primary" @click="handleSubmit">保存</a-button>
    </div>

    <create-version ref="createVersionRef" @success="createVersionSuccess" />
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import { UploadCell, FileCell, HSearchSelectCell, HSearchMultiSelectCell } from '@/components';
import CreateVersion from '@/views/version/versionList/components/CreateVersion.vue';
import api from '@/api';
import store from '@/store';
import { useMessage } from '@/hooks/common/useMessage';
import { useRouter, useRoute, onBeforeRouteLeave } from 'vue-router';
import { useProductFormData, useCreateProductForm } from '@/views/productRequire/createProductRequire/hooks';
import { defineComponent, ref, unref, computed, onMounted, nextTick, getCurrentInstance, defineAsyncComponent } from 'vue';
export default defineComponent({
    name: 'CreateProductForm',
    components: {
        TEditor: defineAsyncComponent(() => import('@/components/TEditor/index.vue')),
        HSearchSelectCell,
        UploadCell,
        FileCell,
        HSearchMultiSelectCell,
        CreateVersion
    },
    props: {
        detail: { type: Object, default: () => ({}) }
    },
    setup(props) {
        const { createJiraLogin } = useMessage();
        const instance: any = getCurrentInstance();
        const router = useRouter();
        const route = useRoute();
        const { form, setForm, resetForm } = useProductFormData();
        const { createVersionRef, searchVersionSelectCellRef, handleCreateVersion, createVersionSuccess, fileChange, handleSelectChange } =
            useCreateProductForm(form, setForm);
        const ruleFormRef = ref<any>();
        const oldDesc = ref<any>('');
        const versionProcessStepStatus = ref<any>('');
        const updateType = ref<number>(1);
        const disabled = computed(() => {
            const res = store.getters.userInfo.employeeDTO.isPM; // 该系统下产品经理即可操作
            if (props.detail.id) {
                return !res || +props.detail.stage >= 8 || props.detail?.jiraId; // 需求测试之前都可以编辑
            } else {
                return false;
            }
        });
        // 监测名称重复
        const validateRepeat = async (rule: any, value: any) => {
            if (value) {
                if (!form.value.requireSystem) {
                    return;
                }
                const { success } = await api.productRequireModel.validProductRepeat({
                    requireName: value,
                    id: props.detail.id || null,
                    requireSystem: form.value.requireSystem
                });
                return success ? Promise.reject('需求名称重复') : Promise.resolve();
            } else {
                return Promise.reject('需求标题不能为空');
            }
        };
        const rules = computed(() => {
            const rules = {
                requireName: [
                    { required: true, message: '需求标题不能为空' },
                    {
                        validator: validateRepeat
                    }
                ],
                requireType: props.detail.jiraUrl ? [] : [{ required: true, message: '需求类型不能为空', trigger: 'blur' }],
                requireSystem: props.detail.relateVersionId ? [] : [{ required: true, message: '所属产品不能为空', trigger: 'blur', type: 'number' }],
                requireDesc: [{ required: true, message: '需求描述不能为空', trigger: 'blur' }],
                level: [{ required: true, message: '优先级不能为空', trigger: 'blur' }],
                agentUser: [{ required: true, message: '当前处理人不能为空', trigger: 'blur' }],
                devType: form.value.systemType !== '3' ? [] : [{ required: true, message: '开发类型不能为空', trigger: 'blur' }]
            };
            return disabled.value ? {} : rules;
        });
        // 用来表示是否支持编辑所属系统，当没有选择关联业务时处于可编辑状态
        const requireSystemDisabled = computed((): boolean => {
            return !form.value.requireSystem;
        });
        const jumpTo = (link) => {
            window.open(link, '_blank');
        };
        // 重置所有和系统有关的信息
        const resetRelateSystemInfo = () => {
            setForm({
                relateRequireId: null,
                relateRequireName: null,
                relateVersionName: null,
                relateVersionNumber: null,
                relateVersionId: null,
                expectTime: '',
                onlineTime: '',
                agentUser: '',
                agentUserEmpId: null
            });
        };
        const handleCalcPlanWorkHours = () => {
            const { backPlanWorkHours, frontPlanWorkHours, executePlanWorkHours } = form.value;
            const planWorkHours = backPlanWorkHours + frontPlanWorkHours + executePlanWorkHours;
            setForm({
                planWorkHours
            });
        };
        const handleSubmit = () => {
            unref(ruleFormRef)
                .validate()
                .then(() => {
                    handleSave();
                })
                .catch(() => {
                    // 验证失败时滚动到第一个错误字段
                    nextTick(() => {
                        const errorField = document.querySelector('.ant-form-item-has-error');
                        if (errorField) {
                            errorField.scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    });
                });
        };
        const handleCancel = () => {
            oldDesc.value = form.value.requireDesc;
            router.go(-1); // 返回上一个界面
        };
        const handleRadioChange = (e) => {
            const val = e.target.value;
            if (val === '0') {
                setForm({
                    unitPrice: 0
                });
            } else {
                setForm({
                    unitPrice: 0,
                    manDay: 0,
                    planCost: 0
                });
            }
        };
        const handleSave = async (showMsg = true) => {
            const { orgList, name: createUser, empId: createUserEmpId } = store.getters.userInfo.employeeDTO;
            if (form.value.unitPrice && form.value.manDay) {
                form.value.planCost = form.value.unitPrice * form.value.manDay;
            }
            const query = {
                ...props.detail,
                ...unref(form),
                createUser,
                createUserEmpId,
                createUserDept: orgList.length ? orgList[0].name : '',
                planWorkHours: unref(form).backPlanWorkHours + unref(form).frontPlanWorkHours + unref(form).executePlanWorkHours
            };
            const { success, errorMsg, errorCode, moule } = await api.productRequireModel.save(query);
            if (success) {
                oldDesc.value = form.value.requireDesc;
                if (showMsg) {
                    message.success(unref(form).id ? '修改成功' : '创建成功');
                    if (unref(form).id) {
                        router.push({
                            path: '/productRequire/productDetail',
                            query: {
                                id: moule.id
                            }
                        });
                    } else {
                        router.push({
                            path: '/workbench'
                        });
                    }
                }
            } else {
                if (errorCode === '003') {
                    createJiraLogin({
                        systemId: props.detail.requireSystem,
                        onOk() {
                            handleSave();
                        }
                    });
                    return;
                }
                message.error(errorMsg);
            }

            return { success, errorMsg };
        };
        const setSystemInfo = async () => {
            const query = {
                id: props.detail.requireSystem
            };
            // 获取系统信息
            const { success, moule } = await api.productDetailModel.findById(query);
            if (success) {
                const { baseWorkHours, workHourCount } = moule;
                setForm({
                    baseWorkHours,
                    workHourCount
                });
            }
        };
        // 获取流程状态
        const getProcessStatus = async (id) => {
            const { success, moule } = await api.versionModel.findById({
                id
            });
            if (success) {
                const query = {
                    instanceId: moule.instanceId
                };
                api.productProcessModel.processStatus(query).then((res) => {
                    versionProcessStepStatus.value = res.moule;
                });
            }
        };
        // 获取系统信息
        const getSystemInfo = async (id) => {
            const { success, moule } = await api.productDetailModel.findById({
                id
            });
            if (success) {
                setForm({
                    catalogCode: moule.catalogCode,
                    pmpLabels: [],
                    systemType: moule.systemType,
                    baseWorkHours: moule.baseWorkHours,
                    workHourCount: moule.workHourCount,
                    planWorkHours: isNaN(form.storyPoints * moule.baseWorkHours * moule.workHourCount)
                        ? 0
                        : form.storyPoints * moule.baseWorkHours * moule.workHourCount
                });
                if (moule.systemType !== '3') {
                    setForm({
                        devType: moule.systemType
                    });
                }
            }
        };
        const init = () => {
            if (props.detail.id) {
                Object.keys(unref(form)).forEach((key) => {
                    setForm({
                        [key]: props.detail[key]
                    });
                });
                props.detail.relateVersionId && getProcessStatus(props.detail.relateVersionId);
                setSystemInfo();
                setForm({
                    systemType: props.detail.pmpProductDetailDTO.systemType,
                    calModel: props.detail.calModel || '0',
                    catalogCode: props.detail.pmpProductDetailDTO.catalogCode
                });
            } else {
                const systemId: any = route.query.systemId || null;
                form.value.requireSystem = +systemId;
                form.value.requireDesc =
                    '<p style="color: #7e8c8d;">作为...<用户角色></p><p style="color: #7e8c8d;">我想...<目标></p><p style="color: #7e8c8d;">这样可以...<利益></p>';

                if (form.value.requireSystem) {
                    getSystemInfo(form.value.requireSystem);
                }
            }
            oldDesc.value = form.value.requireDesc;
        };
        init();
        onMounted(() => {
            if (disabled.value) {
                // 找出所有图片，并添加放大手势
                nextTick(() => {
                    document.querySelectorAll('#requireDesc img').forEach((item: any) => {
                        item.addEventListener('click', () => {
                            instance.proxy.$mitt.emit('previewImg', item.src);
                        });
                        item.style.cursor = 'zoom-in';
                    });
                });
            }
        });
        onBeforeRouteLeave((to, from, next) => {
            if (oldDesc.value !== form.value.requireDesc) {
                const { createConfirm } = useMessage();
                createConfirm({
                    title: `编辑内容尚未保存，是否保存？`,
                    iconType: 'danger',
                    onOk: async () => {
                        unref(ruleFormRef)
                            .validate()
                            .then(async () => {
                                const res: any = await handleSave(false);
                                if (res.success) {
                                    message.success('保存成功');
                                    next();
                                } else {
                                    message.error(res.errorMsg);
                                }
                            })
                            .catch((err) => {
                                console.log(err);
                            });
                    },
                    onCancel: () => {
                        resetForm();
                        next();
                    }
                });
            } else {
                resetForm();
                next();
            }
        });
        return {
            ruleFormRef,
            createVersionRef,
            searchVersionSelectCellRef,
            oldDesc,
            form,
            disabled,
            rules,
            updateType,
            requireSystemDisabled,
            resetRelateSystemInfo,
            handleSelectChange,
            handleSubmit,
            handleCancel,
            handleSave,
            handleCreateVersion,
            createVersionSuccess,
            fileChange,
            resetForm,
            jumpTo,
            handleRadioChange,
            handleCalcPlanWorkHours,
            versionProcessStepStatus
        };
    }
});
</script>
<style scoped lang="less">
.extra-cont {
    margin-left: 12px;
    .extra-text {
        margin-right: 16px;
        font-size: 16px;
        color: @primary-color;
    }
}
.btn-group {
    margin: 24px 0;
    button + button {
        margin-left: 8px;
    }
}
.desc-content {
    ::v-deep(div) {
        white-space: normal !important;
    }
    img {
        max-width: 400px;
        max-height: 400px;
    }
}

.create-product-form-buttons {
    position: fixed;
    bottom: 24px;
    right: 66px;
    z-index: 1000;
    display: flex;
    gap: 8px;
}

.create-product-form-content {
    padding-bottom: 32px; // 添加底部内边距，为固定按钮腾出空间
}
</style>
